<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>码客山威 - 用户管理</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/fileinput.min.css" rel="stylesheet">
<style type="text/css">
  .green {
    background: rgb(50,197,210);
    color:white;
    margin-right: 5px;
  }

  .blue {
    background: rgb(53,152,220);
    color:white;
    margin-right: 5px;
  }

  .red {
    background: rgb(231,80,90);
    color:white;
    margin-right: 5px;
  }

  #mytable td{
    vertical-align:middle;
  }
</style>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

</head>

<body>  
  <div class="col-sm-12">   
    <div class="row">
      <ol class="breadcrumb">
        <li><a href="#"><span class="glyphicon glyphicon-home"></span></a></li>
        <li class="active">轮播图管理</li>

      </ol>
    </div><!--/.row-->
    <div class="row">
      <div class="col-lg-12">
        <div class="row">
          <div class="col-lg-12">
            <h3 class="page-header">轮播图管理</h3>
          </div>
        </div><!--/.row-->
        <div class="row">
          <div class="col-lg-12">
            <div class="panel panel-primary">
              <div class="panel-heading">轮播管理</div>
              <div class="panel-body">
                <form id="form" method="post">
                  <div class="form-horizontal">
                    <div class="form-group">
                      <label class="col-sm-2 control-label">轮播标题</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" name="title" placeholder="请输入标题">
                      </div>
                      <label class="col-sm-1 control-label col-sm-offset-1">目标链接</label>
                      <div class="col-sm-4">
                        <input type="text" class="form-control" name="targetlink" placeholder="http..." id="link">
                      </div>
                    </div>
                   
                    <div class="form-group">
                      <label class="col-sm-1 col-sm-offset-1 control-label">轮播描述</label>
                      <div class="col-sm-9">
                        <input type="text" class="form-control" name="context" placeholder="描述">
                      </div>
                    </div>
                    <div class="form-group">
                      <label class="col-sm-1 col-sm-offset-1 control-label">图片筛选</label>
                      <div class="col-sm-10">
                        <input type="file" name="file" id="image_file" multiple class="file-loading" />
                      </div>
                    </div>
                    <div class="form-group">
                       <div class="col-sm-1 col-sm-offset-2">
                        <a href="javascript:addNewCarouse()" id="lunbobtn" class="btn btn-sm btn-danger" disabled="true">新增轮播</a>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-12">
        <div class="row">
           <div class="col-lg-12">
              <div class="panel panel-default">
                <div class="panel-heading">轮播图筛选</div>
                <div class="panel-body">
                  <table id="mytable">
                      
                  </table>
                </div>
              </div>

            </div>
        </div>
      </div>
    </div>
  </div>  <!--/.main-->
      

  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/fileinput.min.js"></script>
  <script src="js/zh.js"></script>
  
  <script type="text/javascript">
    $(function () {
    //0.初始化fileinput
        var oFileInput = new FileInput();
        oFileInput.Init("image_file", "https://control.maksdu.com/upload");
    });

    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();

        //初始化fileinput控件（第一次初始化）
        oFile.Init = function(ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);

            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式     
                dropZoneEnabled: false,//是否显示拖拽区域
                minImageWidth: 500, //图片的最小宽度
                minImageHeight: 290,//图片的最小高度
                maxImageWidth: 2000,//图片的最大宽度
                maxImageHeight: 1160,//图片的最大高度
                maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                minFileCount: 0,
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            });

            //导入文件上传完成之后的事件
            $("#image_file").on("fileuploaded", function (event, data, previewId, index) {
               $("#lunbobtn").removeAttr("disabled");
               setTempValue(data.response.content);
            });
        }
        return oFile;
    };
  </script>
  <script src="js/bootstrap-table.js"></script>
  <script src="js/carouse-data.js"></script>
  <script type="text/javascript">

    $('#mytable').bootstrapTable({
      url:'https://control.maksdu.com/carouse/getall?rnd='+ Math.random(),
      method: 'get',
        toolbar: '#toobar',//工具列
        striped: true,//隔行换色
        cache: false,//禁用缓存
        pagination: true,//启动分页
        sidePagination: 'client',//分页方式
        pageNumber: 1,//初始化table时显示的页码
        pageSize: 10,//每页的记录行数（*）
        showFooter: false,//是否显示列脚
        showPaginationSwitch: true,//是否显示 数据条数选择框
        sortable: true,//排序
        search: true,//启用搜索
        showColumns: true,//是否显示 内容列下拉框
        showRefresh: true,//显示刷新按钮
        idField: 'SystemCode',//key值栏位
        clickToSelect: true,//点击选中checkbox
        singleSelect: true,//启用单行选中
        queryParams : function (params) {
              //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
              var temp = {   
                  rows: params.limit,                         //页面大小
                  page: (params.offset / params.limit) + 1,   //页码
                  sort: params.sort,      //排序列名  
                  sortOrder: params.order //排位命令（desc，asc） 
              };
              return temp;
        },
        responseHandler:function (res) {
                return res.content;
        },
        columns:[
        {
          field: 'SerialNumber',
            title: '序号',
            formatter: function (value, row, index) {
                return index+1;
            }
        },
        {
          field: 'preview',
          title: '图片预览',
          width: "260",
          formatter: function (value, row, index) {
              return "<a href='"+row.pictureName+"' target='_blank'><img style='width:auto;height:auto;max-width:100%;height:max-height:100%' src='"+row.pictureName+"' alt='"+row.pictureName+"'/></a>"
          },
        },
        {
          field: 'title',
          title: '标题',
          width: '140',
        },
        {
          field: 'context',
          title: '内容'
        },
        {
          field: 'targetLink',
          title: '目标链接',
          formatter: function (value, row, index) {
            return "<a href='"+value+"'>"+value+"</a>";
          }
        },
        {
          field: 'status',
          title: '轮播状态',
          formatter: function (value, row, index) {
            if(!row.status) {
              return "<span style='color:green'>启用</span>";
            } else {
              return "<span style='color:red'>未启用</span>";
            }
          }
        },
        {
          field: 'handle',
          title: '操作',
          formatter: function (value, row, index) {
            return "<a href='javascript:deleteLunbo(" + row.id + ")' class='btn btn-xs red' title='删除'><span class='glyphicon glyphicon-remove'></span></a>"
          }
        }
        ]
      });

      !function ($) {
          $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
              $(this).find('em:first').toggleClass("glyphicon-minus");      
          }); 
          $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
      }(window.jQuery);

      $(window).on('resize', function () {
        if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
      })
      $(window).on('resize', function () {
        if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
      })

       
  </script> 
</body>

</html>
